<template>
  <div class="app-container">
    <el-steps :active="stepIndex" simple finish-status="finish">
      <el-step>
        <template v-slot:icon>
          1
        </template>
        <template v-slot:title>
          验证用户身份
        </template>
      </el-step>
      <el-step>
        <template v-slot:icon>
          2
        </template>
        <template v-slot:title>
          选择变更类型
        </template>
      </el-step>
      <el-step>
        <template v-slot:icon>
          3
        </template>
        <template v-slot:title>
          填写基本信息
        </template>
      </el-step>
      <el-step>
        <template v-slot:icon>
          4
        </template>
        <template v-slot:title>
          认证完成
        </template>
      </el-step>
    </el-steps>
    <el-divider></el-divider>
    <div v-show="stepIndex==0">
      <verification @verification="verificationPhone"/>
    </div>
    <div v-show="stepIndex==1" v-if="recordIndex.includes(1)">
      <individual-enterprise @chose="choseType" @lastStep="lastStep"/>
    </div>
    <div v-show="stepIndex==2" v-if="recordIndex.includes(2)">
      <enterprise-information v-if="submitData.type==1" @lastStep="lastStep" @submit="submit" :dataInfo="submitData"/>
      <personal-information v-if="submitData.type==2" @lastStep="lastStep" @submit="submit" :dataInfo="submitData"/>
    </div>
    <div v-show="stepIndex==3" class="auth-success">
      <div>
        <el-row style="width: 400px;">
          <el-col :span="8" style="height: 200px">
            <img src="../../../assets/images/unit/auth-success.png" width="128" height="128"/>
            <div>认证成功</div>
          </el-col>
          <el-col :span="16" style="line-height: 128px">
            {{title}}
          </el-col>
        </el-row>
        <div style="font-weight: normal">页面关闭时间{{ this.closePage.tim }}s</div>
      </div>
    </div>
  </div>
</template>
<script>
import individualEnterprise from "@/views/unit/merunit/computed/individualEnterprise.vue";
import verification from "@/views/unit/merunit/computed/verification.vue";
import EnterpriseInformation from "@/views/unit/merunit/computed/enterpriseInformation.vue";
import PersonalInformation from "@/views/unit/merunit/computed/personalInformation.vue";
import {getVehcusunitByDeptId, updateVehcusunit} from "@/api/merunit/vehmerunit";
import {Message} from "element-ui";


export default {
  name: "updateAuthentication",
  data() {
    return {
      title:'长沙SKL股份邮箱公司',
      closePage: {
        tim: undefined,
        interval: undefined
      },
      submitData: {
        id: '',
        type: 0,
        phoneType: '',
        phone: ''
      },
      stepIndex: 0,
      recordIndex: []
    }
  },
  computed: {
    deptId() {
      return this.$store.getters.deptId;
    }
  },
  methods: {
    submit(info,back) {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      updateVehcusunit(info).then(response => {
        if (response.code==200){
          if (info.unitType==1){
            this.title=info.comContactName
          }
          if (info.unitType==2){
            this.title=info.customerUnitName
          }
          this.nextStep()
          this.closePageFun()
        }
      }).catch(res=>{
        back()
      })
      setTimeout(() => {
        loading.close()
      }, 1000)
    },
    verificationPhone(phoneData) {
      this.submitData.phone = phoneData.phone
      this.submitData.phoneType = phoneData.phoneType
      this.nextStep()
    },
    closePageFun() {
      this.closePage.tim = 10
      this.closePage.interval = setInterval(() => {
        this.closePage.tim--
        if (this.closePage.tim < 0) {
          clearInterval(this.closePage.interval)
          const obj = {path: "/unitManager/authentication"};
          this.$tab.closeOpenPage(obj);
        }
      }, 1000)
    },
    nextStep() {
      this.stepIndex++
      if (!this.recordIndex.includes(this.stepIndex)) this.recordIndex.push(this.stepIndex)
    },
    lastStep() {
      this.stepIndex--
    },
    choseType(value) {
      this.submitData.type = value
      this.nextStep()
    },
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        this.stepIndex++
        // TODO 提交表单
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
  },
  mounted() {
    getVehcusunitByDeptId(this.deptId).then(res => {
      if (res.code == 200) {
        this.submitData.id = res.data.id
      } else {
        Message.error(res.msg)
      }
    })
  },
  components: {
    EnterpriseInformation,
    PersonalInformation,
    verification,
    individualEnterprise
  }
}
</script>


<style scoped lang="scss">
.border-num {
  border: 1px solid;
  display: inline-block;
  border-radius: 50%;
  text-align: center;
  width: 25px;
  height: 25px;
  line-height: 25px;
}

.auth-success {
  font-weight: bold;
  width: 100%;
  height: 100%;
  min-height: 400px;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
}
</style>
